<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>


    <script>
        // for var 
        // var btns = document.querySelectorAll('button');
        // for(var i=0;i<btns.length;i++){
        //     btns[i].dataset.index = i
        //     btns[i].onclick = function(){
        //         alert(this.dataset.index);
        //     }
        // }


        var btns = document.querySelectorAll('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick = (function(index){
                return function(){
                    alert(index);
                }
            })(i);
        }

        // 每次循环  ()() 都会执行一次 
        // ()(i) i 传给形参 index 
        // 通过闭包  延长了 function(index){}的生命周期 
        // function(index){}的生命周期  执行空间不被销毁 
        // 所以 index 生命周期被延长   
        // 当我触发事件处理函数 依然可以拿到 index 



        // 闭包的好处: 
        //  因为延长了生命周期 所以 全局变量不被污染 
        //  应用场景   外部访问函数内部的私有变量
        //             函数延时执行 
        //             循环绑定事件
        //              沙箱
        //             柯里化
        //              设计模式
        //              函数节流和防抖 


        // 坏处  一直在内存待着 容易引起内存泄露
    
    </script>
</body>
</html>